<template>
    <div class="container">
      <div class="containerBox">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide item" v-for="(item, index) in pointImgList" :key="index">
              <img class="img" :src="item.thumb1" alt="">
            </div>
         
          </div>
                 <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
       			
            <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>

</template>
<script>
import  Swiper  from "swiper"
export default {
    data() {
    return {
      pointImgList: [
        {
          thumb1: require('../../imgs/detail/phone-1.jpg')
        },
        {
          thumb1: require('../../imgs/detail/phone-2.jpg'),
        },
        {
          thumb1: require('../../imgs/detail/phone-3.jpg'),
        },
        {
          thumb1: require('../../imgs/detail/phone-4.jpg'),
        },
      ]
    }
  },
  methods: {
    bannerPoint() {
      new Swiper(".swiper-container", {
        loop: true,
        autoplay: {
          delay: 2000, //1秒切换一次
          disableOnInteraction: false
        },
        updateOnImagesReady: true,
        slidesPerView: 1,  //设置slider容器能够同时显示的slides数量
        //spaceBetween : '10%',按container的百分比

        observer: true,//在 Swiper 的上启用动态检查器(Mutation Observer)，如果你更改swiper 的样式（隐藏/显示）或修改其子元素（添加/删除幻灯片），Swiper 会更新（重新初始化）并触发 observerUpdate 事件。
        observeParents: true,
        observeSlideChildren: true,

        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          paginationClickable:true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next', // 右按钮
          prevEl: '.swiper-button-prev', // 左按钮
        },
      })
    }

  },
   mounted() {
    this.bannerPoint()
  },
}
</script>
<style scoped>
 .containerBox {
    width: 640px;
    /* margin: 50px auto; */
 }
  .item {
    width: 100%;
  }
  .img {
    width: 100%;
    padding: 0 10px;
  }
  
</style>
<style>
    /* .swiper-container{
        width: 64%;
    } */
</style>